<template>
  <view class="media-panel">
    <view class="content">
      <media-filter :selectMediaItems="selectedMediaItems" @onSearch="onSearchEvent" @onUploadMedia="onUploadMediaEvent"
        @onCancelSelect="() => $refs.mediaList.cancelAllSelected()"
        @onDeleteSelect="(e) => $refs.mediaList.deleteSelectedMedia(e)"></media-filter>
      <media-list style="margin-top: 50px;height:calc(100% - 50px)" ref="mediaList" :media-group="filter.mediaGroup" :media-type="mediaType" :keyword="filter.keyword"
        :selectedCount="selectedCount" @onUploadMedia="onUploadMediaEvent" @onSelect="onSelectEvent"></media-list>
    </view>
    <view class="media-info-view"  :class="{expend: isExpend}">
      <media-info :current-media="currentMedia" <!-- #ifndef H5 -->
        v-if="currentMedia"
        <!-- #endif -->
        ></media-info>
      <view class="expend-btn" @click="expendMediaInfo" v-if="currentMedia">
        <uni-icons :type="isExpend ? 'right': 'left'" size="16" color="#fff"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  import MediaInfo from "../media-info/index.vue";
  import MediaFilter from "../media-filter/index.vue";
  import MediaList from "../media-list/index.vue";
  import {
    cropImg,
    extnameMap,
    transformPreviewMediaList
  } from "../../common/upload-helper";
  import {mapActions} from 'vuex'
  export default {
    name: "source-panel",
    props: {
      mediaType: String,
      selectedCount: Number
    },
    components: {
      MediaList,
      MediaFilter,
      MediaInfo
    },
    data() {
      return {
        currentMedia: null,
        selectedMediaItems: [],
        isExpend: false,
        filter: {
          mediaGroup: null,
          keyword: null
        }
      }
    },
    watch: {
      currentMedia(newVal) {
        if (!newVal) {
          this.isExpend = false
        }
      }
    },
    methods: {
      ...mapActions('source', ['save']),
      onUploadMediaEvent() {
        const _this = this
        uni.chooseFile({
          count: 1,
          success: (chooseImageRes) => {
            uni.showLoading({
              title: "正在上传中.",
              mask: true
            })
            const tempFilePaths = chooseImageRes.tempFilePaths;
            _this.save(tempFilePaths[0]).then(_ => {
              uni.showToast({
                title: "上传成功"
              })
              
              _this.$refs.mediaList.loadMediaList(true)
            }).finally(_ => {
              uni.hideLoading()
            })
          }
        });
      },
      onSearchEvent(filter) {
        this.filter = filter
      },
      onSelectEvent(selectedMediaItems) {
        const currentMedia = selectedMediaItems.find(item => item.active)
        this.selectedMediaItems = selectedMediaItems
        this.currentMedia = currentMedia
      },
      getSelectedMediaItems() {
        return this.selectedMediaItems
      },
      expendMediaInfo() {
        this.isExpend = !this.isExpend
      }
    }
  }
</script>

<style lang="scss" scoped>
  .media-panel {
    // flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    overflow: hidden;
    
    height: 100%;

    .content {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      user-select: none;
      background-color: white;
    }
  }

  .media-info-view {
    position: relative;

    .expend-btn {
      display: none;
      position: absolute;
      top: 30%;
      // top: 60px;
      left: -28px;
      background: #2979ff;
      width: 28px;
      height: 40px;
      align-items: center;
      justify-content: center;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      cursor: pointer;
    }
  }


  @media screen and (max-width: 1024px) {
    .media-info-view {
      transform: translateX(280px);
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      transition: transform .3s;

      &.expend {
        z-index: 1000;
        
        
        transform: translateX(0);
      }
      .expend-btn {
        display: flex;
        
      }
    }
  }
</style>